<template>
	<view class="box">
		<div class="title">账号密码登录</div>
		<div class="input">
			<!-- <input type="text" placeholder="请输入账号"> -->
			<uv-input placeholder="请输入账号" border="bottom" fontSize="35rpx" v-model="user"></uv-input>
		</div>
		<div class="input">
			<uv-input password placeholder="请输入密码" border="bottom" fontSize="35rpx" v-model="password"></uv-input>
		</div>

		<div style="margin-top: 60rpx;">
			<uv-button text="登录" shape="circle" size='large' @click="login"
				color="linear-gradient(to right, rgb(3, 200, 212), rgb(3, 200, 212))"></uv-button>
		</div>
		<div class="reg" @click="toReg">新用户注册</div>

		<uv-loading-page :loading="loading" loading-text="登录中..." font-size="24rpx"></uv-loading-page>
	</view>
</template>

<script>
	import api from '@/static/api.js'
	export default {
		data() {
			return {
				user: '',
				password: '',
				loading: false
			}
		},
		methods: {
			login() {
				let showNoMsg = (() => {
					if (this.user.length <= 6) {
						return '账户名不可低于6位'
					}
					if (this.password.length <= 8) {
						return '密码不可低于8位'
					}
					return ''
				})()
				if (showNoMsg) {
					uni.showToast({
						title: showNoMsg,
						icon: "none",
						duration: 2000
					});
					return;
				}
				this.loading = true
				api.login({
					user: this.user,
					password: this.password
				}).then(res_ => {
					let res = res_.data
					if (res.code != 200) {
						this.loading = false
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
						return
					}
					uni.showToast({
						title: "登录成功",
						icon: "success",
						duration: 2000
					});
					setTimeout(() => uni.navigateBack(), 1000)
				})
			},
			toReg() {
				uni.navigateTo({
					url: '/pages/loginPage/register'
				})
			}
		}
	}
</script>

<style lang='less' scoped>
	.box {
		padding: 30rpx 50rpx;
	}

	.title {
		margin-top: 20rpx;
		font-size: 50rpx;
		font-weight: 700;
		color: #444;
		margin-bottom: 60rpx;
	}

	.input {
		margin-bottom: 40rpx;
		/* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */

	}

	.reg {
		text-align: right;
		margin-top: 40rpx;
		color: #555;
	}
</style>